import React, { useEffect, useState, useRef, useContext } from 'react'
import {CountContext} from '../../Context/count'
import {Progress,Modal} from 'antd'

export default function Count ({ value, setCountValue, onStart, setOnStart}) {
  const { configData } = useContext(CountContext)
  console.log(configData.isAlert);
    // const [value, setValue] = useState(0);
    const [timers, setTimers] = useState([]);
    const saveCallBack = useRef();
    // const [onStart,setOnStart] =useState(true)
    const callBack = () => {
      if(onStart) return
      const random = 1;
      value >= configData.count ? setCountValue(configData.count) : setCountValue(value + random);
      
    };
    useEffect(() => {
      saveCallBack.current = callBack;
      return () => {};
    });
    useEffect(() => {
      const tick = () => {
        saveCallBack.current();
      };
      const timer = setInterval(tick, 1000);
      timers.push(timer);
      setTimers(timers);
      console.log(timers);
      return () => {
        clearInterval(timer);
      };
    }, []);
  const handelonClick = () => {
    // 开启
    setOnStart(!onStart)
    
  }

  
  return (
    <div onClick={handelonClick}>
      <Progress type="circle" percent={(100/configData.count).toFixed(0) * value}
                  format={percent => `${value}s`}
      width={60}
    />
    </div>
  )
}
